Grids are overrated 網格的重要性被高估了

雖然12列網格系統可以幫助我們簡單地規劃頁面佈局，讓設計看起來更有條理，但我們不應該過分依賴它。

Not all elements should be fluid 並不是所有元素都應該是流式佈局的（百分比 + 自適應）

為什麼呢？因為不是所有的設計元素都適合用百分比來決定寬度。網格系統的核心就是用百分比來設定寬度，比如在12列網格中，每列佔8.33%的寬度。

讓我們看一個簡單的例子：網頁上的側邊欄。如果我們按照網格系統，可能會給側邊欄25%的寬度，主要內容區域75%的寬度。這樣做會帶來兩個問題：

更好的方法是什麼？給側邊欄一個固定的寬度，讓它始終保持最適合的大小。這樣主要內容區域就能更好地利用剩餘空間。

元件裡也要記住這一點：只有當你真想讓元素跟著螢幕大小變化時，才使用百分比設定尺寸。

Don’t shrink an element until you need to 在必要時才縮小元素尺寸

元件裡面也要遵循同樣的規則,不要隨便用百分比來設定尺寸，除非你確實需要元素跟著螢幕大小變化。

來說說元素的大小問題。以登入框為例，如果讓它佔據整個螢幕寬度會很奇怪。有人可能會想用網格系統，讓它佔6列（也就是50%的寬度），兩邊各留3列空白。

但這樣做會帶來一個問題：在中等大小的螢幕上，登入框看起來太窄了。為了解決這個問題，你可能會把它調整為8列寬度，兩邊各留2列空白。

這種做法其實不太合理。因為網格寬度是按百分比計算的，所以在某些螢幕尺寸下，中等螢幕上的登入框反而比大螢幕上的更寬。這不是我們想要的效果。

更好的方法是：如果你知道登入框最合適的寬度是500畫素，那就直接設定這個寬度。只有當螢幕實在太小時，才讓它變窄。簡單來說，不要被網格系統限制住 — 讓元件保持最合適的大小，只在真正需要的時候才調整它。